<template>
	<view class="teacherhome">
		<view class="headerbg">
			<view class="title">
				首页
			</view>
			<view class="homebox">
				<view class="searchbox" @click="gotoSearch">
					<u-icon label="请输入搜索词" size="30" name="search"></u-icon>
					<text class="searchtext"> 搜索</text>
				</view>
				<view v-if="selectedStudent.length == 0" class="selectStudent">
					<view class="title">
						已选择学生 (0/2)
					</view>
					<!-- 未选择导师 -->
					<view class="selectitem">
						<view class="kongingbox">
							<image class="noselectimg"
								src="http://sssx.nanjingyunpeng.cn/uploads/tupian/image/noselect.png"></image>
						</view>
						<view class="mesaage">
							暂未选择学生
						</view>
					</view>
				</view>
				<view v-else class="selectStudent">
					<view class="title">
						已选择学生 <text>(</text>{{selectedStudent.length}}<text>/2)</text>
					</view>
					<view class="">
						<scroll-view class="scroll-view_Hs" scroll-x="true" scroll-left="0">
							<view class="selecteditem" v-for="(item,index) in selectedStudent" @click="gotoStudentdetail(item.id)">
								<view class="itemleft">
									<view class="avaterbox">
										<image class="avatartimg" :src="item.student.photos.url"></image>
									</view>
									<view class="nameandmessage">
										<view class="name">
											{{item.student.name}}
										</view>
										<view class="message">
											{{item.student.school}}/{{item.student.speciality}}
										</view>
									</view>
								</view>

								<view class="itemright">
									<view class="baokao">
										报考：
									</view>
									<view class="zhuanye">
										{{item.student.science_id_text}}
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
				<!-- tabs切换栏 -->
				<view class="">
					<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="0">
						<view class="itemone" :class="currIndex == index ? 'itemoned' : ''"
							v-for="(item,index) in tabsData" @click="handlebg(item,index)">
							{{item.name}}
						</view>
					</scroll-view>
				</view>

				<scroll-view scroll-y="true" class="studentbox" style="height: 740rpx; margin-top: 30rpx;">
					<view class="boxitem" v-for="(item,index) in studentData" :key="item.id"
						@click="gotoStudentdetail(item.id)">
						<view class="itemleft">
							<view class="avaterbox">
								<image class="avatartimg" :src="item.photos.url"></image>
							</view>
							<view class="nameandmessage">
								<view class="name">
									{{item.name}}
								</view>
								<view class="message">
									{{item.school}}/{{item.speciality}}
								</view>
							</view>
						</view>

						<view class="itemright">
							<view class="baokao">
								报考：
							</view>
							<view class="zhuanye">
								{{item.science_id_text}}
							</view>
						</view>
					</view>
					<view v-if="!kongFlag" class="">
						<u-empty
						        mode="data"
						        icon="http://cdn.uviewui.com/uview/empty/data.png"
								text='暂无该专业学生'
						>
						</u-empty>
					</view>
				</scroll-view>

			</view>
		</view>
	</view>
	
	
	<!-- 	<u-tabbar :value="value1" :fixed="true" :placeholder="false" :safeAreaInsetBottom="true">
			<u-tabbar-item text="首页" icon="home-fill"></u-tabbar-item>
			<u-tabbar-item text="个人中心" icon="account-fill" @click="click1"></u-tabbar-item>
		</u-tabbar> -->
</template>

<script>
	import {
		science,
		getStudentList,
		selectedstudent
	} from "@/api/api.js"
	export default {
		data() {
			return {
				value1: 0,
				currIndex: 0,
				tabsData: [],
				studentData: [],
				zhuanyeId: "", //专业id
				selectedStudent: [],
				kongFlag:false
			}
		},
		onLoad() {
			this.getscience()
			this.selectedstudents()
		},
		methods: {
			handlebg(item, index) {
				console.log("item", item)
				this.currIndex = index
				this.zhuanyeId = item.id
				this.getStudentLists()
			},
			async selectedstudents() {
				let res = await selectedstudent()
				if (res.code == 1) {
					console.log("已选学生", res)
					this.selectedStudent = res.data
				}
			},
			
			async getscience() {
				let res = await science()
				if (res.code == 1) {
					console.log("专业列表", res)
					this.tabsData = res.data
					this.zhuanyeId = res.data[0].id
					console.log("专业id", this.zhuanyeId)
					this.getStudentLists()
				}
			},
			async getStudentLists() {
				let res = await getStudentList({
					science_id: this.zhuanyeId
				})
				if (res.code == 1) {
					console.log("学生列表", res)
					this.studentData = res.data
					if(this.studentData.length>0){
						this.kongFlag = true
					}else{
						this.kongFlag = false
					}
				}
			},
			gotoSearch() {
				uni.navigateTo({
					url: '../../pages_teachers/search/index',
				})
			},
			gotoStudentdetail(id) {
				uni.navigateTo({
					url: `../../pages_teachers/studentDetail/index?id=${id}`
					// url:'../../pages_teachers/studentDetail/index'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		height: 100%;
		background-color: #F7F8FA;
	}
	

	.teacherhome {
		// width: 750rpx;
		min-height: 100%;
		background-color: #F7F8FA;
		.scroll-view_Hs {
			white-space: nowrap;
			width: 690rpx;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			display: flex;
			margin-top: 20rpx;
		}
		
		.selecteditem {
			width: 650rpx;
			height: 164rpx;
			background: #F7F8FA;
			border-radius: 30rpx 30rpx 30rpx 30rpx;
			opacity: 1;
			display: flex;
			justify-content: space-between;
			padding: 30rpx;
			box-sizing: border-box;
		
			.itemleft {
				display: flex;
		
				.avaterbox {
					.avatartimg {
						margin-right: 10rpx;
						width: 104rpx;
						height: 104rpx;
						border-radius: 100rpx;
		
					}
				}
		
				.nameandmessage {
					width: 200rpx;
					padding-top: 5rpx;
					box-sizing: border-box;
		
		
					.name {
						font-size: 32rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #333333;
						line-height: 38rpx;
					}
		
					.message {
						width: 340rpx;
						font-size: 26rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #666666;
						line-height: 30rpx;
						margin-top: 20rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}
		
			}
		
			.itemright {
				display: flex;
				align-items: center;
				flex-direction: column;
				justify-content: space-between;
		
				.baokao {
					font-size: 26rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
					line-height: 30rpx;
				}
		
				.zhuanye {
					height: 48rpx;
					background: #F0F7FF;
					border-radius: 12rpx 12rpx 12rpx 12rpx;
					opacity: 1;
					border: 2rpx solid #4A9CFF;
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #4A9CFF;
					line-height: 28rpx;
					text-align: center;
					line-height: 48rpx;
		
				}
			}
		}
		
		
		
		.scroll-view_H {
			white-space: nowrap;
			width: 100vw;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			height: 74rpx;
			display: flex;
			margin-top: 20rpx;
		}
		
		.itemone {
			width: 172rpx;
			height: 60rpx;
			background: #FFFFFF;
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			opacity: 1;
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			line-height: 60rpx;
			text-align: center;
			color: #333333;
			display: inline-block;
			margin-right: 20rpx;
		}
		
		.itemoned {
			background: #4A9CFF;
			color: #FFFFFF;
		}
		

		.headerbg {
			width: 750rpx;
			height: 470rpx;
			background: linear-gradient(180deg, #4A9CFF 0%, rgba(74, 156, 255, 0) 100%);
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			padding-top: 120rpx;
			box-sizing: border-box;

			.title {
				width: 750rpx;
				height: 45rpx;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				opacity: 1;
				padding-left: 40rpx;
				box-sizing: border-box;
				font-size: 32rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				line-height: 38rpx;
			}

			.homebox {
				padding: 1rpx 30rpx;
				box-sizing: border-box;

				.searchbox {
					width: 690rpx;
					height: 80rpx;
					background: #FFFFFF;
					border-radius: 200rpx 200rpx 200rpx 200rpx;
					margin-top: 10rpx;
					line-height: 80rpx;
					padding-left: 20rpx;
					padding-right: 4rpx;
					box-sizing: border-box;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.searchtext {
						width: 156rpx;
						height: 72rpx;
						background: #4A9CFF;
						border-radius: 200rpx 200rpx 200rpx 200rpx;
						opacity: 1;
						display: inline-block;
						font-size: 30rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 42rpx;
						text-align: center;
						line-height: 72rpx;
					}
				}

				.selectStudent {
					width: 690rpx;
					height: 288rpx;
					background: #FFFFFF;
					box-shadow: 0rpx 0rpx 24rpx 0rpx rgba(206, 220, 237, 0.2);
					border-radius: 30rpx 30rpx 30rpx 30rpx;
					opacity: 1;
					margin-top: 24rpx;
					padding: 30rpx;
					box-sizing: border-box;

					.title {
						font-size: 32rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #333333;
						line-height: 38rpx;
					}

					.selectitem {
						width: 100%;
						// height: 100%;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: space-between;

						.kongingbox {
							width: 172rpx;
							height: 172rpx;

							.noselectimg {
								width: 100%;
								height: 100%;
							}
						}

						.mesaage {
							font-size: 26rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #666666;
							line-height: 30rpx;
						}
					}
				}

				.studentbox {
					width: 100%;
					// height: 300rpx;
					margin-top: 10rpx;

					.boxitem {
						width: 690rpx;
						height: 164rpx;
						background: #FFFFFF;
						border-radius: 30rpx 30rpx 30rpx 30rpx;
						margin-bottom: 30rpx;
						display: flex;
						justify-content: space-between;
						padding: 30rpx;
						box-sizing: border-box;

						.itemleft {
							display: flex;

							.avaterbox {
								.avatartimg {
									margin-right: 10rpx;
									width: 104rpx;
									height: 104rpx;
									border-radius: 100rpx;
								}
							}

							.nameandmessage {
								padding-top: 5rpx;
								box-sizing: border-box;

								.name {
									font-size: 32rpx;
									font-family: PingFang SC-Bold, PingFang SC;
									font-weight: bold;
									color: #333333;
									line-height: 38rpx;
								}

								.message {
									width: 360rpx;
									font-size: 26rpx;
									font-family: PingFang SC-Regular, PingFang SC;
									font-weight: 400;
									color: #666666;
									line-height: 30rpx;
									margin-top: 20rpx;
									white-space: nowrap;
									overflow: hidden;
									text-overflow: ellipsis;
								}
							}

						}

						.itemright {
							display: flex;
							align-items: center;
							flex-direction: column;
							justify-content: space-between;

							.baokao {
								font-size: 26rpx;
								font-family: PingFang SC-Regular, PingFang SC;
								font-weight: 400;
								color: #666666;
								line-height: 30rpx;
							}

							.zhuanye {
								height: 48rpx;
								background: #F0F7FF;
								border-radius: 12rpx 12rpx 12rpx 12rpx;
								opacity: 1;
								border: 2rpx solid #4A9CFF;
								font-size: 24rpx;
								font-family: PingFang SC-Regular, PingFang SC;
								font-weight: 400;
								color: #4A9CFF;
								line-height: 28rpx;
								text-align: center;
								line-height: 48rpx;

							}
						}
					}
				}
			}

		}
	}
	
	
	
	
</style>